import React, { Component, useState } from 'react'
import {
  Route,
  Link,
  Routes,
  NavLink,
  useRoutes,
  Navigate,
} from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import News from './pages/News'
import Message from './pages/Message'
import Detail from './pages/Detail'

// import Test from './pages/Test'
export default function App() {
  const [flag, setFlag] = useState(false)
  // useRoutes根据路由表自动创建Routes和Route组件
  const routes = useRoutes([
    {
      path: '/',
      element: <Home></Home>,
    },
    {
      path: 'home',
      element: <Home></Home>,
      children: [
        {
          path: 'news',
          element: <News></News>,
        },
        {
          path: 'message',
          element: <Message></Message>,
          children: [
            {
              path: 'detail/:id',
              element: <Detail></Detail>,
            },
          ],
        },
      ],
    },
    {
      path: 'about',
      element: <About></About>,
    },
  ])
  return (
    <div>
      <button
        onClick={() => {
          setFlag(!flag)
        }}
      >
        演示Navigate组件
      </button>
      {flag && <Navigate to="/home/message/detail/9"></Navigate>}
      <div className="row">
        <div className="col-xs-offset-2 col-xs-8">
          <div className="page-header">
            <h2>React Router Demo</h2>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            <NavLink
              // style={({ isActive }) => {
              //   // return

              //   return isActive ? { backgroundColor: 'red' } : {}
              // }}
              className="list-group-item"
              to="/about"
            >
              About
            </NavLink>
            <NavLink className="list-group-item" to="/home" end>
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 要 在这里写Routes和Route . useRoutes的返回值就是Routes和Route */}
              {routes}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
